﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用JavaScript处理XML文档</title>
<script type="text/javascript" src="js/xmlDom.js"></script>
<script type="text/javascript">
window.onload = function() {
	//加载XML文档
	var productsDom = loadXml("products.xml");
	var categoryDom = loadXml("category.xml");
	
	//获得HTML中id为product的节点，该节点为一个table元素
	var table = document.getElementById("product");
	//获得product节点内部的tbody节点
	var t = document.getElementsByTagName("tbody")[0];
	
	//获得XML文档的所有product元素
	var xmlProducts = productsDom.getElementsByTagName("product");
	
	//循环获取每个product节点中的数据
	for (var i=0; i<xmlProducts.length; i++) {
		//获得节点的属性
		var id = xmlProducts[i].getAttribute("id");
		
		//获得节点的子节点数据
		var name = getXmlNodeValue(xmlProducts[i], "name");
		var thumbnail = getXmlNodeValue(xmlProducts[i], "thumbnail");
		var price = getXmlNodeValue(xmlProducts[i], "price");
		var categoryId = getXmlNodeValue(xmlProducts[i], "categoryid");
		categoryId = parseInt(categoryId); //转换为数值类型的，方便以后使用
		
		//根据分类ID在category.xml中获取到分类名称
		var categoryNode = categoryDom.getElementsByTagName("category")[categoryId-1];
		var categoryName = getXmlNodeValue(categoryNode, "name");
		
		//创建tr节点
		var tr = document.createElement("tr");
		//创建显示商品名称的td节点
		var tdName = document.createElement("td");
		//向商品名称td节点写入内容
		tdName.appendChild(document.createTextNode(name));
		//创建显示商品图片的td节点
		var tdImg = document.createElement("td");
		//创建图片节点
		var img = document.createElement("img");
		//设置图片属性
		img.src=thumbnail;
		img.width = 100;
		//将图片节点添加到单元格上
		tdImg.appendChild(img);
		//创建显示价格的td节点
		var tdPrice = document.createElement("td");
		//向价格td节点写入内容
		tdPrice.appendChild(document.createTextNode(price));
		//创建显示商品类别的td节点
		var tdCate = document.createElement("td");
		//向商品类别td节点写入内容
		tdCate.appendChild(document.createTextNode(categoryName));
		//把tr节点添加在tbody节点内
		t.appendChild(tr);
		//把td节点依次添加在tr节点内
		tr.appendChild(tdName);
		tr.appendChild(tdImg);
		tr.appendChild(tdPrice);
		tr.appendChild(tdCate);
	}
}

/**
 * 获得某个节点的文本子节点
 */
function getXmlNodeValue(xmlNodeObj, nodeName) {
	return xmlNodeObj.getElementsByTagName(nodeName)[0].firstChild.nodeValue;
}
</script>
</head>
<body>
	<table id="product" border="1px" cellpadding="20px" 
		cellspacing="0" align="center">
		<caption>商品信息列表</caption>
		<tr>
			<th>商品名称</th>
			<th>商品缩略图</th>
			<th>商品价格</th>
			<th>商品分类</th>
		</tr>	
	</table>
</body>
</html>